<template>
  <div class="songlist">
    <div class="introdution">
      <div class="image">
        <img :src="curSongList.coverImgUrl" />
      </div>
      <div class="text">
        <div class="title">
          <div class="tab">
            <el-tag type="success">歌单</el-tag>
          </div>
          <div class="name">{{ curSongList.name }}</div>
        </div>
        <div class="collect-info">
          <div class="avatar">
            <el-avatar :size="30" :src="curSongList.creator.avatarUrl" />
          </div>
          <div class="username ml10">{{ curSongList.creator.nickname }}</div>
          <div class="createtime m10">{{ createtime(curSongList.createTime) }}创建</div>
        </div>
        <div class="action">
          <el-button class="but" type="success">
            <span class="iconfont icon-player-play"></span>
            <span class="ml10">播放全部</span>
          </el-button>
          <el-button class="but ml10">
            <span class="iconfont icon-shoucang1"></span>
            <span class="ml10">已收藏({{ todigits(curSongList.subscribedCount) }})</span>
          </el-button>
        </div>
        <div class="introduce">
          <div class="tags">
            标签：<span>{{ tags(curSongList.tags) || '无' }}</span>
          </div>
          <div class="count">
            <div class="songcount">歌曲：35</div>
            <div class="playcount ml10">播放：{{ todigits(curSongList.playCount) }}</div>
          </div>
          <div class="description oh">简介：{{ curSongList.description || '无' }}</div>
        </div>
      </div>
    </div>
    <div class="content">
      <el-tabs>
        <el-tab-pane label="歌曲列表" lazy>
          <el-table :data="tableData" @row-click="handlePlay">
            <el-table-column width="50">
              <template #default="scope">
                <span>{{ scope.$index }}</span>
                <!-- <span v-else class="iconfont icon-shengyin_shiti"></span> -->
              </template>
            </el-table-column>
            <!-- <el-table-column label="操作" width="100">
            <template #default="scope">
              <span class="iconfont icon-aixin-xian"></span>
            </template>
          </el-table-column> -->
            <el-table-column show-overflow-tooltip v-for="(column, index) in columns" :key="index" :prop="column.prop" :label="column.label" :formatter="column.formatter" :width="column.width"></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="评论">
          <div class="conment">
            <div class="publish-conment">
              <el-input type="textarea" :rows="4" v-model="commentText" class="text"></el-input>
              <el-button class="send-comment" @click="sendComent">评论</el-button>
            </div>
            <div class="hot-conment" v-if="hotComment.length>0">
              <div class="title">精彩评论</div>
              <div class="main">
                <div class="item" v-for="(item, index) in hotComment" :key="index">
                  <div class="left">
                    <div class="avatar">
                      <el-avatar :size="35" :src="item.user.avatarUrl" />
                    </div>
                    <div class="text">
                      <div class="name oh">
                        <span class="username">{{ item.user.nickname }}：</span>
                        <span class="content oh">{{ item.content }}</span>
                      </div>
                      <div class="time">
                        {{ item.timeStr }}
                      </div>
                    </div>
                  </div>
                  <div class="right">
                    <span class="iconfont icon-dianzan"></span>
                  </div>
                </div>
              </div>
            </div>
            <div class="new-conment" v-if="newComment.length>0">
              <div class="title">最新评论</div>
              <div class="main">
                <div class="item" v-for="(item, index) in newComment" :key="index">
                  <div class="left">
                    <div class="avatar">
                      <el-avatar :size="35" :src="item.user.avatarUrl" />
                    </div>
                    <div class="text">
                      <div class="name oh">
                        <span class="username">{{ item.user.nickname }}：</span>
                        <span class="content oh">{{ item.content }}</span>
                      </div>
                      <div class="time">
                        {{ item.timeStr }}
                      </div>
                    </div>
                  </div>
                  <div class="right">
                    <span class="iconfont icon-dianzan"></span>
                  </div>
                </div>
              </div>
            </div>
            <div v-if="hotComment.length==0&&newComment.length==0" class="not-comment">还没有评论,快来抢沙发~</div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import { useMusicStore } from '@/store/music'
import { ref, computed, reactive, onMounted, getCurrentInstance, onUpdated, watch,nextTick } from 'vue'
import utils from '@/utils/utils.js'
import { ElMessage } from 'element-plus'
const musicStore = useMusicStore()
const { proxy } = getCurrentInstance()
// 歌单信息
let curSongList = computed(() => {
  return musicStore.curSongList
})
let createtime = (time) => {
  return utils.formateDate(new Date(time), 'yyyy-MM-dd')
}
let tags = (tags) => {
  return tags.join(' ')
}
let todigits = (playCount) => {
  if (playCount < 10000) {
    return playCount
  } else if (playCount < 100000000 && playCount > 9999) {
    return Math.floor(playCount / 10000) + '万'
  } else {
    return Math.floor(playCount / 100000000) + '亿'
  }
}

// 获取歌单每首歌的id
let songIds = ref()
let songDetail = ref([])
let tableData = ref([])
let getSongIds = async () => {
  let { privileges } = await proxy.$api.getSongIds({ id: curSongList.value.id })
  songIds.value = privileges.map((item) => item.id).join(',')
}
// 获取音乐详情
let getSongListDetail = async () => {
  let { songs } = await proxy.$api.getSongListDetail({ ids: songIds.value })
  songDetail.value = songs
}
// 获取音乐播放地址
let getSongListUrl = async () => {
  let { data,code } = await proxy.$api.getMusicUrl({ id: songIds.value })
  if(code==-462){
    return ElMessage.error('请先登录！')
  }
  tableData.value = data
}
// 将音乐详情数据合并到tableData中
let connect = () => {
  songDetail.value.forEach((item, index) => {
    let i=tableData.value.find(i=>i.id==item.id)
    tableData.value[index]={...i,...item}
  })
}
// 获取歌单评论数据
let hotComment = ref([])
let newComment = ref([])
let getSongListComment = async () => {
  let { hotComments, comments } = await proxy.$api.getSongListComment({ id: curSongList.value.id, offset: 0 })
  hotComment.value = hotComments
  newComment.value = comments
}
// 发送评论
let commentText=ref()
let sendComent=async()=>{
  let {code}=await proxy.$api.sendComment({id:curSongList.value.id,content:commentText.value})
  if(code==200){
    proxy.$message({
      type:'success',
      message:'发布成功'
    })
    commentText.value=''
    await getSongListComment()
  }
}
watch(curSongList, async () => {
  await getSongIds()
  await getSongListDetail()
  await getSongListUrl()
  connect()
  await getSongListComment()
})
onMounted(async () => {
  await getSongIds()
  await getSongListDetail()
  await getSongListUrl()
  connect()
  await getSongListComment()
  await getSongListComment()
})

// 表格
let columns = ref([
  {
    label: '音乐标题',
    prop: 'name',
    width:'350px'
  },
  {
    label: '歌手',
    // width:'250',
    prop: 'ar',
    formatter(row) {
      return row.ar.map((item) => item.name).join(' / ')
    },
  },
  {
    label: '专辑',
    prop: 'al',
    formatter(row) {
      return row.al.name
    },
  },
  {
    label: '时长',
    prop: 'dt',
    width: '100',
    formatter(row) {
      return utils.formateDate(new Date(row.dt), 'mm:ss')
    },
  },
])
// 播放音乐
let handlePlay = (val) => {
  console.log(val.url);
  musicStore.saveCurPlayMusicUrl(val.url)
  musicStore.saveCurMusicInfo(val)
  musicStore.setIsPlay(true)
}
</script>

<style lang="scss">
.songlist {
  height: 100%;
  width: 100%;
  font-size: 16px;
  .introdution {
    width: 100%;
    height: 220px;
    display: flex;
    align-items: center;
    .image {
      width: 200px;
      img {
        width: 180px;
        border-radius: 8px;
      }
    }
    .text {
      width: calc(100% - 200px);
      padding-left: 10px;
      height: 180px;
      display: flex;
      flex-direction: column;
      .title {
        height: 30px;
        align-items: center;
        display: flex;
        .name {
          font-size: 24px;
          font-weight: bolder;
          margin-left: 10px;
        }
      }
      .collect-info {
        height: 40px;
        display: flex;
        align-items: center;
        .username {
          line-height: 30px;
          font-size: 14px;
          color: #0fa6e9;
          height: 30px;
        }
        .createtime {
          line-height: 30px;
          font-size: 14px;
          height: 30px;
        }
      }
      .action {
        .but {
          border-radius: 30px;
        }
      }
      .introduce {
        margin-top: 10px;
        flex: 1;
        display: flex;
        flex-direction: column;
        .tags {
          height: 22px;
          line-height: 22px;
          font-size: 14px;
          span {
            color: #0fa6e9;
          }
        }
        .count {
          height: 22px;
          line-height: 22px;
          font-size: 14px;
          display: flex;
        }
        .description {
          height: 22px;
          line-height: 22px;
          font-size: 14px;
        }
      }
    }
  }
  .content {
    width: 100%;
    .conment {
      width: 100%;
      display: flex;
      flex-direction: column;
      .publish-conment {
        width: 100%;
        height: 120px;
        position: relative;
        .send-comment{
          margin-top: 20px;
          margin-right: 10px;
          float: right;
          border-radius: 20px;
        }
      }
      .hot-conment {
        width: 100%;
        display: flex;
        flex-direction: column;
        .title {
          margin-top: 20px;
          height: 20px;
          line-height: 20px;
          font-size: 14px;
          font-weight: 900;
        }
        .main {
          width: 100%;
          display: flex;
          flex-direction: column;
          .item {
            width: 100%;
            height: 80px;
            border-bottom: 1px solid rgba($color: #473f3f, $alpha: 0.2);
            display: flex;
            justify-content: space-between;
            .left {
              height: 100%;
              flex: 1;
              display: flex;
              align-items: center;
              .avatar {
                width: 35px;
                margin-right: 20px;
              }
              .text {
                font-size: 14px;
                flex: 1;
                flex-direction: column;
                align-items: center;
                .name {
                  .username {
                    color: #0fa6e9;
                  }
                  width: 1100px;
                }
                .time {
                  color: rgba($color: #6d6060, $alpha: 1);
                }
              }
            }
            .right {
              height: 100%;
              width: 50px;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
        }
      }
      .new-conment {
        width: 100%;
        display: flex;
        flex-direction: column;
        .title {
          margin-top: 20px;
          height: 20px;
          line-height: 20px;
          font-size: 14px;
          font-weight: 900;
        }
        .main {
          width: 100%;
          display: flex;
          flex-direction: column;
          .item {
            width: 100%;
            height: 80px;
            border-bottom: 1px solid rgba($color: #473f3f, $alpha: 0.2);
            display: flex;
            justify-content: space-between;
            .left {
              height: 100%;
              flex: 1;
              display: flex;
              align-items: center;
              .avatar {
                width: 35px;
                margin-right: 20px;
              }
              .text {
                font-size: 14px;
                flex: 1;
                flex-direction: column;
                align-items: center;
                .name {
                  .username {
                    color: #0fa6e9;
                  }
                  width: 1100px;
                }
                .time {
                  color: rgba($color: #6d6060, $alpha: 1);
                }
              }
            }
            .right {
              height: 100%;
              width: 50px;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
        }
      }
      .not-comment{
        font-size: 14px;
        text-align: center;
        margin-top: 20px;
        opacity: 0.6;
      }
    }
  }
}
</style>
